<template>
  <b class="text-red">{{stringify(dis)}}</b>
</template>

<script>
import { stringify, timer } from '../../utils/timer'

export default {
  name: 'countdown',
  props: ['duration'],
  data: () => ({
    dis: {}
  }),
  methods: {
    start (duration) {
      clearInterval(this.timer)
      this.timer = timer(duration, (dis) => {
        if (dis.t <= 0) {
          this.$emit('end')
        }
        this.dis = dis
      })
    },
    stringify
  },
  watch: {
    duration (d) {
      d && this.start(d)
    }
  },
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  }
}
</script>
